<div role="tabpanel"  >
<!-- 页签导航 -->
  <ul class="nav nav-tabs " role="tablist" >
    <li role="presentation" class="active"><a href="#course" aria-controls="course" role="tab" data-toggle="tab" >课程</a></li>
    <li role="presentation"><a href="#addCoursePanel" aria-controls="addCoursePanel" role="tab" data-toggle="tab">新增</a></li>
  </ul>
<!--end-->
<!-- 页签面板-->
<div class="tab-content">
  <div role="tabpanel" class="tab-pane active" id="course">
  	<div class="panel panel-default">
	    <div class="panel-body">

		    <div class="row">
          <div class="col-lg-6">
            <div class="input-group">
              <input type="text" class="form-control" placeholder="Search for...">
              <span class="input-group-btn">
                <button class="btn btn-primary" type="button">搜 索</button>
              </span>
            </div>
          </div>
        </div>

        <table class="table table-striped">
            <thead>
              <tr>
                <th class="col-md-1">#</th>
                <th class="col-md-1">课程图片</th>
                <th class="col-md-1">课程名称</th>

                <th class="col-md-1">推荐指数</th>
                <th class="col-md-2">注册日期</th>
                <th class="col-md-4">课程描述</th>
                <th class="col-md-2">操作</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>1</td>
                <td><img src="images/size.png"></td>
                <td>Java</td>

                <td>5</td>
                <td>2015-07-03</td>
                <td>课程描述</td>
                <td>
                  <a href="" data-toggle="modal" data-target="#editCourse"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>编辑</a>
                  <a href="" data-toggle="modal" data-target=".bs-example-modal-sm"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除</a>
                </td>
              </tr>
              <tr>
                <td>2</td>
                <td><img src="images/size.png"></td>
                <td>Java</td>

                <td>5</td>
                <td>2015-07-03</td>
                <td>课程描述</td>
                <td>
                  <a href="" data-toggle="modal" data-target="#editCourse"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>编辑</a>
                  <a href="" data-toggle="modal" data-target=".bs-example-modal-sm"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除</a>
                </td>
              </tr>
              <tr>
                <td>3</td>
                <td><img src="images/size.png"></td>
                <td>Java</td>

                <td>5</td>
                <td>2015-07-03</td>
                <td>课程描述</td>
                <td>
                  <a href="" data-toggle="modal" data-target="#editCourse"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>编辑</a>
                  <a href="" data-toggle="modal" data-target=".bs-example-modal-sm"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除</a>
                </td>
              </tr>
              <tr>
                <td>4</td>
                <td><img src="images/size.png"></td>
                <td>Java</td>

                <td>5</td>
                <td>2015-07-03</td>
                <td>课程描述</td>
                <td>
                  <a href="" data-toggle="modal" data-target="#editCourse"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>编辑</a>
                  <a href="" data-toggle="modal" data-target=".bs-example-modal-sm"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除</a>
                </td>
              </tr>
              </tr>
              <tr>
                 <td>4</td>
                 <td><img src="images/size.png"></td>
                <td>Java</td>

                <td>5</td>
                <td>2015-07-03</td>
                <td>课程描述课程描述课程描述课程描述</td>
                <td>
                  <a href="" data-toggle="modal" data-target="#editCourse"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>编辑</a>
                  <a href="" data-toggle="modal" data-target=".bs-example-modal-sm"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除</a>
                </td>
              </tr>
            </tbody>
          </table>
	  </div>
  </div>

  <!-- 删除用户的Modal界面 -->
  <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="myModalLabel">删除课程</h4>
        </div>
        <div class="modal-body">
          确认删除该记录？
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary">确  认</button>
          <button type="button" class="btn btn-primary" data-dismiss="modal">取  消</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 修改课程的Modal界面 -->
  <div class="modal fade" id="editCourse" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header" align="center">
        <h4 class="modal-title" id="myModalLabel">
          <strong>编 辑 课 程</strong>
        </h4>
      </div>
      <div class="modal-body">
        <form class="form-horizontal" action="" method="post">
          <div class="form-group">
          <label class="col-md-3 control-label" for="courseName">课程名称:</label>
          <div class="col-md-8">
            <input type="text" id="courseName"  class="form-control">
          </div>
          </div>

          <div class="form-group">
            <label class="col-md-3 control-label" for="recommended">推荐指数: </label>
          <div class="col-md-8">
            <input type="number" id="recommended"  class="form-control">
          </div>
          </div>

          <div class="form-group">
            <label class="col-md-3 control-label" for="picture">课程图片:</label>
            <div class="col-md-8">
              <input type="file" id="picture">
            </div>
          </div>

          <div class="form-group">
          <label class="col-md-3 control-label" for="courseDesc">课程描述:</label>
          <div class="col-md-8">
          <textarea class="form-control" rows="4"></textarea>
          </div>
          </div>

          <div class="form-group">
          <div class="col-md-4 col-md-offset-8">
          <button type="submit" class="btn btn-primary">确  认</button>
          <button type="reset" class="btn btn-primary" data-dismiss="modal">取  消</button>
          </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

  <!-- 分页导航 -->
  <nav class="col-md-4 col-md-offset-4">
    <ul class="pagination">
      <li>
        <a href="#" aria-label="Previous">
          <span aria-hidden="true">&laquo;</span>
        </a>
      </li>
      <li class="active"><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">5</a></li>
      <li>
        <a href="#" aria-label="Next">
          <span aria-hidden="true">&raquo;</span>
        </a>
      </li>
    </ul>
  </nav>

  </div>
<!-- 添加课程 -->
  <div role="tabpanel" class="tab-pane" id="addCoursePanel">
  <div class="panel panel-default">
  <div class="panel-body">
  <form class="form-horizontal" action="" method="post">

  <div class="form-group">
    <label class="col-md-2 control-label" for="courseName">课程名称:</label>
      <div class="col-md-8">
        <input type="text" id="courseName"  class="form-control">
      </div>
  </div>

  <div class="form-group">
  <label class="col-md-2 control-label" for="recommended">推荐指数: </label>
  <div class="col-md-8">
  <input type="number" id="order"  class="form-control">
  </div>
  </div>

  <div class="form-group">
              <label class="col-md-2 control-label" for="picture">课程图片:</label>
              <div class="col-md-8">
                <input type="file" id="picture">
              </div>
            </div>

  <div class="form-group">
  <label class="col-md-2 control-label" for="courseDesc">课程描述:</label>
  <div class="col-md-8">
  <textarea id="desc" class="form-control" rows="4"></textarea>
  </div>
  </div>

<div class="form-group">
<div class="col-md-8 col-md-offset-2">
 <button type="submit" class="btn btn-primary">确  认</button>
 <button type="reset" class="btn btn-primary">重  置</button>
</div>
</div>

  </form>
  </div>
  </div>
  </div>
</div><!-- /tab-content-->